@keyframes expandAnimate {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes slideInto {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@media only screen and (max-width: 1439px) {
  .c7n-starTargetPro-proContainer-items-project {
    height: 18px;
  }
}

@media only screen and (min-width: 1440px) {
  .c7n-starTargetPro-proContainer-items-project {
    height: 36px;
  }
}

.c7n-starTargetPro {
  display: flex;
  flex-direction: column;
  background-color: rgba(245, 246, 250, 1);
  position: relative;
  &-name {
    //overflow: auto;
   //.c7n-workbench-card-content {
   // overflow-y: visible;
   //}
   .c7n-workbench-card-header-title {
    width: 100%;
    display: inline-block;
    .title-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .right-text {
        font-size: 13px;
        color: rgba(83, 101, 234, 1);
        display: flex;
        align-items: center;
        cursor: pointer;
        .icon {
          margin-left: 2px;
        }
      }
     }
   }
  }

  &-proContainer {
    display: grid;
    grid-row-gap: 0;
    grid-column-gap: 13px;
    grid-template-columns: repeat(6, 15.75%);
    height: 100%;
    &::-webkit-scrollbar {
      height: 2px;
    }
    &-focus {
      background: #7589f2 !important;
    }
    .Loop(@index) when(@index < 7) {
      &-items:nth-child(@{index}) {
        animation-delay: 0.1s * @index;
      }
      .Loop(@index+1);
    }
    .Loop(0);

   &-items {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      position: relative;
      height: 100%;
      padding: 16px 16px 10px;
      cursor: pointer;
      background: rgba(245, 246, 250, 1);
      border-radius: 10px;
      animation: slideInto 0.6s both;
      transition: 0.2s;
      &:hover {
        background: rgba(104, 135, 232, 0.1);
      }

      &-correct {
        border-radius: 8px;
        position: absolute;
        top: -9px;
        left: 42%;
        width: 30px;
        background: rgba(58, 52, 95, 1);
        &-icon {
          position: relative;
          left: 6px;
          display: inline-block;
          width: 7px;
          height: 2px;
          background: white;
          line-height: 0;
          font-size: 0;
          vertical-align: middle;
          -webkit-transform: rotate(45deg);
        }
        &-icon:after {
          content: "/";
          display: block;
          width: 14px;
          height: 2px;
          background: white;
          -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
        }
      }

      &-header {
        display: flex;
        flex-direction: row;
        align-items: center;

        p {
          margin: 0;
        }
        // width: 100%;

        &-icon {
          width: 30px;
          height: 30px;
          flex-shrink: 0;
          margin-right: 6px;
          border-radius: 10px;
          font-size: 20px;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          background-size: 100% 100%;
        }

        &-text {
          font-size: 13px;
          font-weight: 400;
          line-height: 18px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

    &-project {
        margin-top: 14px;
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      &-extra {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: auto;
        height: 24px;
        border-radius: 4px;
        z-index: 10;
        transition: 0.2s;
        // &:hover,
        // &:focus {
        //   background-color: rgba(117, 137, 242, 0.4) !important;
        // }
        // &:active {
        //   background-color: rgba(117, 137, 242, 0.2) !important;
        // }
        // line-height: 24px;
        // text-align: center;

        &-text {
          font-size: 12px;
          font-weight: 400;
          color: rgba(104, 135, 232, 1);
        }

        &-goNext {
          width: 12px;
          height: 12px;
          margin-left: 5px;
          border-radius: 50%;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          background-color: rgba(104, 135, 232, 1);

          i {
            font-size: 0.12rem;
            color: #fff;
          }
        }
     }
    }
  }
  &-content {
    background: white;
    // flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 151px;
      height: 120px;
    }
    &-emptyText {
      margin-left: 70px;
      &-emptyP {
        font-size: 14px;
        font-weight: 400;
        color: var(--text-color3);
        margin-bottom: 0.09rem;
      }
      &-emptySuggest {
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 0.2rem;
      }
    }
  }
}
